<template>
  <div>
    <div class="logo">
      <img src="../assets/logo.png" alt=""  />
    </div>
    <van-form validate-first @submit="onSubmit">
      <van-field
        label="手机号"
        v-model="userName"
        name="userName"
        placeholder="请输入手机号"
        @change="verifphone"
        :rules="[{ required: true, message: '请输入正确的手机号' }]"
      />
      <van-field
        label="用户名"
        v-model="nickName"
        name="nickName"
        @change="verifpassword"
        placeholder="请输入真实姓名"
        :rules="[{ required: true, message: '请输入真实姓名' }]"
      />
      <van-field
        label="楼栋"
        v-model="area"
        name="area"
        placeholder="楼栋信息，例:3"
        @change="verifarea"
        :rules="[{ required: true, message: '请输入正确的数字' }]"
      />
      <van-field
        label="详细地址"
        v-model="address"
        name="address"
        placeholder="请输入详细地址"
        @change="verifpassword"
        :rules="[{ required: true }]"
      />
      <van-field
        label="密码"
        v-model="password"
        name="password"
        placeholder="请输入6位以上组合密码"
        @change="verifpassword"
        :rules="[{ required: true, message: '请输入正确的密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <router-link class="toreg" :to="{ name: 'Login' }"
      >已有账户，去登录~</router-link
    >
  </div>
</template>

<script>
import { reg } from "../services/auth";
import Vue from "vue";
import { Form } from "vant";
import { setToken } from "../utils/tools";
Vue.use(Form);

export default {
  data() {
    return {
      userName: "",
      nickName: "",
      area: "",
      address: "",
      password: "",
      flag: false,
    };
  },

  methods: {
    async onSubmit(values) {
      const res = await reg(values);
      if (res.code == 1) {
        setToken(res.data);
        this.$router.push({
          name: "Login",
        });
      }
    },
    verifphone() {
      console.log(this.userName);
    },
    verifarea() {
      console.log(this.area);
    },
    verifpassword() {
      console.log(
        this.userName,
        this.nickName,
        this.password,
        this.area,
        this.address
      );
    },
  },
};
</script>

<style>
.logo {
  width: 100px;
  margin: 50px auto;
}
.toreg {
  display: block;
  width: 400px;
  color: red;
  margin: 10px auto;
  text-align: center;
}
</style>